<template>
  <div class="filtrate-month-range-module">
    <el-date-picker
      class="date-picker-model"
      popper-class="date-picker-model-popper"
      v-model="datePickerModel"
      :type="datePickerConfig.type"
      :placeholder="datePickerConfig.placeholder"
      :value-format="datePickerConfig.valueFormat"
      :clearable="false"
      @change="(event) => changeTime(event)"
      :disabled-date="monthPickerDisabledOptions"
      size="small"
    />
  </div>
</template>

<script setup>
import {defineEmits, ref, onMounted, defineProps, watch} from "vue";

const props = defineProps({
  monthRange: {
    type: Array,
    default: () => ([])
  }
});

watch(
  () => props?.monthRange,
  (newVal) => {
    datePickerModel.value = props?.monthRange
  },
  {deep: true}
)

const emit = defineEmits(['changeFiltrateTime'])

const datePickerModel = ref('')
const datePickerConfig = ref({
  type: 'monthrange',
  valueFormat: 'YYYY-MM'
})

const changeTime = (item) => {
  console.log(item);
  emit('changeFiltrateTime', item)
}

const monthPickerDisabledOptions = (time) => { // 月范围禁用校验
  let afterDate = new Date().getTime();
  return time.getTime() > afterDate;
}
</script>

<style scoped lang="less">
.filtrate-month-range-module {
  display: flex;
  align-items: center;
/*  .date-picker-model {
    width: 100px;
  }
  /deep/ .date-picker-model {
    width: 90px;
    height: 24px;
  }*/
  /deep/ .el-input__wrapper {
    background: rgba(33,112,207,0.2);
    box-shadow: inset 0px 0px 8px 0px #3D7FFF;
    border: 1px solid #67BAEF;
    .el-range-input, .el-range-separator {
      color: white;
    }
  }
}
:deep(.el-date-editor) {
  opacity: 1;
}
</style>
<style lang="less">
.date-picker-model-popper {
  .el-month-table td.disabled .cell {
    background-color: #6969694f !important;
    color: #ffffff47 !important;
  }
}
</style>